<!--
 * @Date: 2020-05-21 21:39:01
 * @LastEditors: 杨光辉(GerhardYang)
 * @LastEditTime: 2021-06-04 12:17:48
 * @FilePath: \supermap-iportal10i-onemap-vue\src\components\Header\Timebar.vue
 * @Description: 当前时间组件
-->
<template>
  <div>{{ date }}</div>
</template>
<script>
export default {
  data() {
    return {
      timer: null,
      date: this.formatData(),
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      this.date = this.formatData();
    }, 1000);
  },
  methods: {
    formatData: () => {
      let date = new Date();
      let seperator1 = "-";
      let seperator2 = ":";

      let month = date.getMonth() + 1;

      let num =
        date.getFullYear() +
        //年
        seperator1 +
        (month < 10 ? "0" + month : month) +
        //月
        seperator1 +
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) +
        //日
        " " +
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
        //时
        seperator2 +
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        //分
        seperator2 +
        (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());
      //秒
      return num;
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
      //在Vue实例销毁前，清除定时器释放资源
    }
  },
};
</script>
